From: Jonas Dreßler <verdre@v0yd.nl>
Date: Mon, 11 Feb 2019 22:05:31 +0000 (+0100)
Subject: panel: Animate opacity changes of the panel corner
X-Git-Tag: archive/raspbian/50.5-1+rpi1~1^2~616^2^2~620
X-Git-Url: https://dgit.raspbian.org/%22http://www.example.com/cgi/%22/%22http:/www.example.com/cgi/%22?a=commitdiff_plain;h=0cbccf74035a7f1bd07fa97933fded683ddc5d25;p=gnome-shell.git

panel: Animate opacity changes of the panel corner

This is a requirement for fading the transparent panel in and out
smoothly.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1397>
---

diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index 9c41c153b..5734ab10f 100644
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
@@ -34,6 +34,7 @@ $panel_height: 2.2em;
     -panel-corner-radius: $panel_corner_radius;
     -panel-corner-background-color: $panel_bg_color;
     -panel-corner-border-width: 2px;
+    -panel-corner-opacity: 1;
   }
 
   // panel menus
diff --git a/js/ui/panel.js b/js/ui/panel.js
index 5b0eaec43..d0f3aff1f 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -574,10 +574,6 @@ class PanelCorner extends St.DrawingArea {
                     let pseudoClass = button.get_style_pseudo_class();
                     this.set_style_pseudo_class(pseudoClass);
                 });
-
-            // The corner doesn't support theme transitions, so override
-            // the .panel-button default
-            button.style = 'transition-duration: 0ms';
         }
     }
 
@@ -618,8 +614,18 @@ class PanelCorner extends St.DrawingArea {
         let cornerRadius = node.get_length("-panel-corner-radius");
         let borderWidth = node.get_length('-panel-corner-border-width');
 
+        const transitionDuration = node.get_transition_duration();
+        const opacity = node.get_double('-panel-corner-opacity');
+
         this.set_size(cornerRadius, borderWidth + cornerRadius);
         this.translation_y = -borderWidth;
+
+        this.remove_transition('opacity');
+        this.ease({
+            opacity: opacity * 255,
+            duration: transitionDuration,
+            mode: Clutter.AnimationMode.EASE_IN_OUT_QUAD,
+        });
     }
 });